<template>
    <Modal v-model="visible" title="反馈建议test" width="640" :mask-closable="false" :before-close="beforeModalClose">
        <Form ref="formRef" :model="formValidate" :rules="formRules" :label-width="80">
            <Form-item label="姓名" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
            </Form-item>
            <Form-item label="邮箱" prop="mail">
                <Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>
            </Form-item>
            <Form-item label="城市" prop="city">
                <Select v-model="formValidate.city" placeholder="请选择所在地">
                    <Option value="beijing">北京市</Option>
                    <Option value="shanghai">上海市</Option>
                    <Option value="shenzhen">深圳市</Option>
                </Select>
            </Form-item>
            <Form-item label="选择日期">
                <Row>
                    <Col span="11">
                        <Form-item prop="date">
                            <Date-picker v-model="formValidate.date" type="date" placeholder="选择日期"></Date-picker>
                        </Form-item>
                    </Col>
                    <Col span="2" style="text-align: center">-</Col>
                    <Col span="11">
                        <Form-item prop="time">
                            <Time-picker v-model="formValidate.time" type="time" placeholder="选择时间"></Time-picker>
                        </Form-item>
                    </Col>
                </Row>
            </Form-item>
            <Form-item label="性别" prop="gender">
                <Radio-group v-model="formValidate.gender">
                    <Radio label="male">男</Radio>
                    <Radio label="female">女</Radio>
                </Radio-group>
            </Form-item>
            <Form-item label="爱好" prop="interest">
                <Checkbox-group v-model="formValidate.interest">
                    <Checkbox label="吃饭"></Checkbox>
                    <Checkbox label="睡觉"></Checkbox>
                    <Checkbox label="跑步"></Checkbox>
                    <Checkbox label="看电影"></Checkbox>
                </Checkbox-group>
            </Form-item>
            <Form-item label="介绍" prop="desc">
                <Input
                    v-model="formValidate.desc"
                    maxlength="100"
                    show-word-limit
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 5 }"
                    placeholder="请输入..."
                ></Input>
            </Form-item>
        </Form>
        <div slot="footer" style="text-align: center">
            <Button :loading="isSubmit" type="text" @click="onClose()">取消</Button>
            <Button :loading="isSubmit" type="primary" @click="onSubmit()">提交</Button>
            <Button :loading="isSubmit" @click="onReset()">重置</Button>
        </div>
    </Modal>
</template>

<script lang="ts">
import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
import { Form } from 'view-design'
@Component({})
export default class Feedback extends Vue {
    @Prop({ default: false }) readonly value!: boolean
    @Ref() readonly formRef!: Form

    get visible() {
        return this.value
    }

    set visible(val) {
        this.formRef.resetFields()
        this.$emit('input', val)
    }

    isSubmit: boolean = false

    formValidate = {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: '',
    }

    formRules = {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        mail: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
        ],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        interest: [
            { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
            { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' },
        ],
        date: [{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }],
        time: [{ required: true, type: 'string', message: '请选择时间', trigger: 'change' }],
        desc: [
            { required: true, message: '请输入个人介绍', trigger: 'blur' },
            { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' },
        ],
    }

    beforeModalClose() {
        if (this.isSubmit) {
            return Promise.reject(new Error('please wait for a minute'))
        } else {
            return Promise.resolve()
        }
    }

    onClose() {
        this.visible = false
    }

    onSubmit() {
        this.formRef.validate((valid) => {
            if (valid) {
                this.isSubmit = true
                console.log({ ...this.formValidate })
                setTimeout(() => {
                    this.isSubmit = false
                    this.$Message.success('提交成功啦')
                    this.onClose()
                }, 300)
            }
        })
    }

    onReset() {
        this.formRef.resetFields()
    }
}
</script>
